<template><div><h2 id="settimeout函数基本用法" tabindex="-1"><a class="header-anchor" href="#settimeout函数基本用法"><span>setTimeout函数基本用法</span></a></h2>
<p>setTimeout函数会在延时一定的时间后，执行一次指定函数，仅执行一次
安全写法</p>
<div class="language-javascript line-numbers-mode" data-highlighter="shiki" data-ext="javascript" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#61AFEF">setTimeout</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">JavaScript</span><span style="color:#E06C75"> 函数</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">等待的毫秒数</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#61AFEF">setTimeout</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">JavaScript</span><span style="color:#E06C75"> 函数</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">等待的毫秒数</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">参数1</span><span style="color:#ABB2BF">...</span><span style="color:#E06C75">参数n</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 后面的参数会传给前面的函数</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>例子</p>
<div class="language-javascript line-numbers-mode" data-highlighter="shiki" data-ext="javascript" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#61AFEF">setTimeout</span><span style="color:#ABB2BF">(</span><span style="color:#C678DD">function</span><span style="color:#61AFEF"> test</span><span style="color:#ABB2BF">(){</span></span>
<span class="line"><span style="color:#E5C07B">	console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"test函数执行"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">},</span><span style="color:#D19A66">1000</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> test2</span><span style="color:#ABB2BF">(){ </span><span style="color:#7F848E;font-style:italic">// 因为javascript是解释型语言，所以函数定义必须写在前面</span></span>
<span class="line"><span style="color:#E5C07B">	console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"test2函数执行"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span>
<span class="line"><span style="color:#61AFEF">setTimeout</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">test2</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">2000</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> test3</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">num</span><span style="color:#ABB2BF">){ </span><span style="color:#7F848E;font-style:italic">// 因为javascript是解释型语言，所以函数定义必须写在前面</span></span>
<span class="line"><span style="color:#E5C07B">	console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"test3函数执行"</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">num</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span>
<span class="line"><span style="color:#61AFEF">setTimeout</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">test3</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">3000</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">1</span><span style="color:#ABB2BF">);</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="setinterval函数基本用法" tabindex="-1"><a class="header-anchor" href="#setinterval函数基本用法"><span>setInterval函数基本用法</span></a></h2>
<p>setInterval函数会在间隔一定的时间后，执行指定函数，重复执行多次
安全写法</p>
<div class="language-javascript line-numbers-mode" data-highlighter="shiki" data-ext="javascript" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#61AFEF">setInterval</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">JavaScript</span><span style="color:#E06C75"> 函数</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">等待的毫秒数</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#61AFEF">setInterval</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">JavaScript</span><span style="color:#E06C75"> 函数</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">等待的毫秒数</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">参数1</span><span style="color:#ABB2BF">...</span><span style="color:#E06C75">参数n</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 后面的参数会传给前面的函数</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>例子</p>
<div class="language-javascript line-numbers-mode" data-highlighter="shiki" data-ext="javascript" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#61AFEF">setInterval</span><span style="color:#ABB2BF">(</span><span style="color:#C678DD">function</span><span style="color:#61AFEF"> test</span><span style="color:#ABB2BF">(){</span></span>
<span class="line"><span style="color:#E5C07B">	console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"test函数执行"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">},</span><span style="color:#D19A66">1000</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> test2</span><span style="color:#ABB2BF">(){ </span><span style="color:#7F848E;font-style:italic">// 因为javascript是解释型语言，所以函数定义必须写在前面</span></span>
<span class="line"><span style="color:#E5C07B">	console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"test2函数执行"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span>
<span class="line"><span style="color:#61AFEF">setInterval</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">test2</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">2000</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> test3</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">num</span><span style="color:#ABB2BF">){ </span><span style="color:#7F848E;font-style:italic">// 因为javascript是解释型语言，所以函数定义必须写在前面</span></span>
<span class="line"><span style="color:#E5C07B">	console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"test3函数执行"</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">num</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span>
<span class="line"><span style="color:#61AFEF">setInterval</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">test3</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">3000</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">1</span><span style="color:#ABB2BF">);</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="settimeout函数如何实现setinterval效果" tabindex="-1"><a class="header-anchor" href="#settimeout函数如何实现setinterval效果"><span>setTimeout函数如何实现setInterval效果</span></a></h2>
<p>即在执行的函数写一个新的定时器，嵌套执行即可</p>
<div class="language-javascript line-numbers-mode" data-highlighter="shiki" data-ext="javascript" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> test</span><span style="color:#ABB2BF">(){ </span></span>
<span class="line"><span style="color:#E5C07B">	console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"test函数执行"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#61AFEF">	setTimeout</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">test</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">1000</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span>
<span class="line"><span style="color:#61AFEF">setTimeout</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">test</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">1000</span><span style="color:#ABB2BF">);</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="javascript事件机制详解" tabindex="-1"><a class="header-anchor" href="#javascript事件机制详解"><span>javascript事件机制详解</span></a></h2>
<p>JavaScript 是一个事件驱动(Event-driven) 的语言，当浏览器载入网页开始读取后，虽然马上会读取JavaScript 事件相关的代码，但是必须要等到「事件」被触发(如使用者点击、按下键盘等)后，才会再进行对应代码段的执行。</p>
<h3 id="什么是dom事件" tabindex="-1"><a class="header-anchor" href="#什么是dom事件"><span>什么是DOM事件</span></a></h3>
<p>用户手动触发的或浏览器自动触发的页面内容和状态的改变，底层通过修改元素的on事件名的属性，自动触发该事件。</p>
<blockquote>
<p>目前理解：事件无外乎就是声明对应一个或多个元素的事件属性发生变化时，去触发对应的事件处理函数，以及事件处理的时机，以下的DOM事件级别应该就是事件的几种声明方式</p>
</blockquote>
<h3 id="dom事件级别" tabindex="-1"><a class="header-anchor" href="#dom事件级别"><span>DOM事件级别</span></a></h3>
<p>DOM有4次版本更新，与DOM版本变更，产生了3种不同的DOM事件：DOM 0级事件处理，DOM 2级事件处理和DOM 3级事件处理。由于DOM 1级中没有事件的相关内容，所以没有DOM 1级事件。</p>
<ul>
<li>DOM0级事件
<ol>
<li>通过查看元素对应的事件属性绑定事件处理函数</li>
<li>只能绑定一个函数，否则后面的函数会覆盖到之前的函数</li>
<li>不存在兼容性问题</li>
</ol>
</li>
<li>DOM2级事件
<ol>
<li>通过 addEventListener 绑定的事件</li>
<li>同一事件可以绑定多种事件处理函数，按照绑定顺序执行</li>
<li>解除事件使用removeEventListener</li>
<li>DOM2级事件有三个参数，属性名，事件处理函数，在捕获还是冒泡阶段处理</li>
<li>注意removeEventListener():不能移除匿名添加的函数。</li>
</ol>
</li>
<li>DOM3级事件
<ol>
<li>DOM3级事件就是在DOM2级事件上增加了更多的事件类型，如UI事件，焦点事件...</li>
<li>同时DOM3级事件也允许使用者自定义一些事件。</li>
</ol>
</li>
</ul>
<h3 id="dom事件流" tabindex="-1"><a class="header-anchor" href="#dom事件流"><span>DOM事件流</span></a></h3>
<p>事件流指的就是网页元素接收事件的顺序。事件流分为两种机制</p>
<ul>
<li>事件捕获</li>
<li>事件冒泡</li>
</ul>
<p>当网页元素中事件触发的时候两种机制都会执行，先触发从上至下到事件触发元素执行事件捕获后从触发元素到根节点触发事件冒泡</p>
<p>实验</p>
<div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> id</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"parent"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    父元素</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> id</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"child"</span><span style="color:#ABB2BF">>子元素&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">  &#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="javascript" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#C678DD">let</span><span style="color:#E06C75"> parent</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getElementById</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'parent'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">let</span><span style="color:#E06C75"> child</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getElementById</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'child'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic">// 通过 addEventListener 指定事件的绑定</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">// 第三个参数 true / false 分別代表 捕获/ 冒泡 机制</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E5C07B">parent</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addEventListener</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'click'</span><span style="color:#ABB2BF">, </span><span style="color:#C678DD">function</span><span style="color:#ABB2BF"> () {</span></span>
<span class="line"><span style="color:#E5C07B">  console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'Parent Capturing'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">}, </span><span style="color:#D19A66">true</span><span style="color:#ABB2BF">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E5C07B">parent</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addEventListener</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'click'</span><span style="color:#ABB2BF">, </span><span style="color:#C678DD">function</span><span style="color:#ABB2BF"> () {</span></span>
<span class="line"><span style="color:#E5C07B">  console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'Parent Bubbling'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">}, </span><span style="color:#D19A66">false</span><span style="color:#ABB2BF">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E5C07B">child</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addEventListener</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'click'</span><span style="color:#ABB2BF">, </span><span style="color:#C678DD">function</span><span style="color:#ABB2BF"> () {</span></span>
<span class="line"><span style="color:#E5C07B">  console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'Child Capturing'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">}, </span><span style="color:#D19A66">true</span><span style="color:#ABB2BF">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E5C07B">child</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addEventListener</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'click'</span><span style="color:#ABB2BF">, </span><span style="color:#C678DD">function</span><span style="color:#ABB2BF"> () {</span></span>
<span class="line"><span style="color:#E5C07B">  console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'Child Bubbling'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">}, </span><span style="color:#D19A66">false</span><span style="color:#ABB2BF">);</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><p>点击子元素后，结果如下</p>
<div class="language-javascript line-numbers-mode" data-highlighter="shiki" data-ext="javascript" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#98C379">"Parent Capturing"</span></span>
<span class="line"><span style="color:#98C379">"Child Capturing"</span></span>
<span class="line"><span style="color:#98C379">"Child Bubbling"</span></span>
<span class="line"><span style="color:#98C379">"Parent Bubbling"</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="事件监听器案例" tabindex="-1"><a class="header-anchor" href="#事件监听器案例"><span>事件监听器案例</span></a></h3>
<div class="language-javascript line-numbers-mode" data-highlighter="shiki" data-ext="javascript" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#C678DD"> function</span><span style="color:#61AFEF"> handleClick</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">event</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">      //执行完后不再冒泡</span></span>
<span class="line"><span style="color:#E5C07B">      event</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">preventDefault</span><span style="color:#ABB2BF">();   </span></span>
<span class="line"><span style="color:#E5C07B">      event</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">stopPropagation</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#E5C07B">      console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"按钮被点击了！"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span>
<span class="line"><span style="color:#C678DD">const</span><span style="color:#E5C07B"> myButton</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getElementById</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"myButton"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">myButton</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addEventListener</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"click"</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">handleClick</span><span style="color:#ABB2BF">, {</span></span>
<span class="line"><span style="color:#E06C75">	capture</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">false</span><span style="color:#ABB2BF">,    </span><span style="color:#7F848E;font-style:italic">// true表示捕获，false表示冒泡  </span></span>
<span class="line"><span style="color:#E06C75">	once</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">false</span><span style="color:#ABB2BF">,       </span><span style="color:#7F848E;font-style:italic">// 监听器是否只调用一次，调用后自动销毁</span></span>
<span class="line"><span style="color:#E06C75">	passive</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">false</span><span style="color:#7F848E;font-style:italic">     // 监听器是否阻止默认操作或停止事件冒泡</span></span>
<span class="line"><span style="color:#ABB2BF">});</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>参考:<br>
https://zhuanlan.zhihu.com/p/73091706<br>
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener<br>
https://blog.csdn.net/qq_54334713/article/details/130357491</p>
</blockquote>
</div></template>


